<template>
  <div class="search">
    <AppHeader />
    <main class="main-content">
      <div class="search-header">
        <h2>搜索 "{{ keyword }}"</h2>
        <div class="tabs">
          <span 
            v-for="tab in tabs" 
            :key="tab.type"
            :class="['tab', { active: currentTab === tab.type }]"
            @click="currentTab = tab.type"
          >
            {{ tab.name }}
          </span>
        </div>
      </div>

      <div v-if="loading" class="loading">搜索中...</div>
      
      <div v-else-if="error" class="error">{{ error }}</div>
      
      <div v-else>
        <!-- 歌曲列表 -->
        <div v-if="currentTab === 'song'" class="song-list">
          <SongItem
            v-for="song in songs"
            :key="song.id"
            :song="song"
          />
        </div>

        <!-- 歌手列表 -->
        <div v-if="currentTab === 'artist'" class="artist-grid">
          <div 
            v-for="artist in artists" 
            :key="artist.id"
            class="artist-card"
            @click="router.push(`/artist/${artist.id}`)"
          >
            <img :src="artist.picUrl" :alt="artist.name">
            <h3>{{ artist.name }}</h3>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { searchAPI } from '@/api'
import type { SongInfo, ArtistInfo } from '@/types'
import AppHeader from '@/components/AppHeader.vue'
import SongItem from '@/components/SongItem.vue'

const route = useRoute()
const router = useRouter()
const keyword = ref(route.query.keyword as string)
const currentTab = ref('song')
const loading = ref(false)
const error = ref('')
const songs = ref<SongInfo[]>([])
const artists = ref<ArtistInfo[]>([])

const tabs = [
  { type: 'song', name: '歌曲' },
  { type: 'artist', name: '歌手' }
]

const search = async () => {
  if (!keyword.value) return
  
  loading.value = true
  error.value = ''
  
  try {
    if (currentTab.value === 'song') {
      const res = await searchAPI.searchSongs(keyword.value)
      songs.value = res.data.list
    } else if (currentTab.value === 'artist') {
      const res = await searchAPI.searchArtists(keyword.value)
      artists.value = res.data.list
    }
  } catch (err) {
    console.error('Search failed:', err)
    error.value = '搜索失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

watch(() => route.query.keyword, (newKeyword) => {
  keyword.value = newKeyword as string
  search()
})

watch(currentTab, search)
</script>

<style scoped>
.search {
  min-height: 100vh;
  background: #f5f5f5;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-header {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.search-header h2 {
  margin-bottom: 20px;
  color: #333;
}

.tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #eee;
}

.tab {
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  color: #666;
}

.tab.active {
  color: var(--primary-color);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-color);
}

.song-list {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}

.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.artist-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.artist-card:hover {
  transform: translateY(-5px);
}

.artist-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.artist-card h3 {
  font-size: 16px;
  color: #333;
}

.loading,
.error {
  text-align: center;
  padding: 40px;
  background: #fff;
  border-radius: 8px;
}

.error {
  color: #ff4d4f;
}
</style> 